﻿<hdkui:LayoutAwarePage x:Name="layoutAwarePage"
    x:Class="HDK.Demo.Pages.HDKHUB"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HDK.Demo.Pages"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:hdkui="using:HDK.UI.Controls"
    xmlns:hdkuiс="using:HDK.UI.Converters"
    mc:Ignorable="d">

    <hdkui:LayoutAwarePage.Resources>
        <hdkuiс:BooleanNegationConverter x:Name="BooleanNot" />

        <!-- Collection of items displayed by this page -->
        <!--<CollectionViewSource x:Name="itemsViewSource" Source="{Binding HubItems}"/> -->
        
        <CollectionViewSource x:Name="FiltererSource" Source="{Binding FiltererSource}" IsSourceGrouped="True"/>
        
        <CollectionViewSource x:Name="itemsViewSource" Source="{Binding HubItemsByCategory}" IsSourceGrouped="True"/>
        <CollectionViewSource x:Name="itemsViewSourceGroups" Source="{Binding Path=View.CollectionGroups, Source={StaticResource itemsViewSource}}" IsSourceGrouped="False"/>

        <DataTemplate x:Name="LiveTileContentTemplate">
            <Grid DoubleTapped="Grid_DoubleTapped_1">
                <!--<Image Stretch="UniformToFill" Source="{Binding ImagePath}" HorizontalAlignment="Stretch"/>-->
                <Border Background="#99000000" VerticalAlignment="Bottom">
                    <StackPanel Margin="5">
                        <TextBlock Foreground="White" Text="{Binding Title}" FontWeight="Bold" />
                        <TextBlock Foreground="White" Text="{Binding Description}" TextWrapping="Wrap" MaxHeight="30" TextTrimming="WordEllipsis"  />
                    </StackPanel>
                </Border>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Name="HubItemTemplate">
            <Grid>
                <hdkui:LiveTile ItemTemplate="{StaticResource LiveTileContentTemplate}" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" />
            </Grid>
            <!--<hdkui:LiveTile ItemTemplate="{StaticResource LiveTileContentTemplate}" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" />-->
        </DataTemplate>
<!--
            <hdkui:LiveTile ItemTemplate="{StaticResource LiveTileContentTemplate}" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" />
        
        -->

        <Style x:Key="LiveTileContainerStyle" TargetType="GridViewItem">
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
        </Style>

    </hdkui:LayoutAwarePage.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        
<Grid x:Name="OuterGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" x:Name="BookshelfRow" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Button Grid.Row="3" Content="SwitchView" Click="btnSwitchView_Click"/>

            <!--<hdkui:AdvancedSemanticZoom x:Name="asz" Grid.Row="4" RootFilter="{Binding LibraryFilter}">
            </hdkui:AdvancedSemanticZoom>-->
<hdkui:VariableSizedGridView  x:Name="zx4"
                    ItemsSource="{Binding Source={StaticResource FiltererSource}}" 
                    ItemTemplate="{StaticResource HubItemTemplate}"
                    IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
                    ItemContainerStyle="{StaticResource LiveTileContainerStyle}" 
                    Grid.Row="4"
                    AutomationProperties.AutomationId="ItemGridView"
                    AutomationProperties.Name="Grouped Items"
                    SelectionMode="None"
                    IncrementalLoadingTrigger="Edge" IncrementalLoadingThreshold="1"
                    >
                <hdkui:VariableSizedGridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="18" FontFamily="Segoe UI Light" />
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid ItemWidth="175" ItemHeight="175" Orientation="Vertical" Margin="0,0,20,0" MaximumRowsOrColumns="3"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </hdkui:VariableSizedGridView.GroupStyle>
                <hdkui:VariableSizedGridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </hdkui:VariableSizedGridView.ItemsPanel>
                <Button Visibility="Collapsed"/>
            </hdkui:VariableSizedGridView>
            
    
            <ItemsControl x:Name="Breadcrumb" Margin="30,15,30,0" FontFamily="Cambria" FontSize="20" ItemsSource="{Binding FilterStack}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                    
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Border x:Name="Divider" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="14,0,10,0">
                                <!--<c:Bitmap Source="..\Images\divider.png" />-->
                            </Border>
                            <Button x:Name="BreadcrumbButton"  Content="{Binding}" 
                                    Command="{Binding Path=DataContext.ApplyFilterCommand, ElementName=layoutAwarePage}"
                                    CommandParameter="{Binding}"
                                    VerticalAlignment="Center" 
                                    IsEnabled="{Binding IsLastInStack, Converter={StaticResource BooleanNot}}"/>
                            <!--  Click="FilterButton_Click"  -->
                            <!--Style="{StaticResource UnderlineButton}" Foreground="{StaticResource SelectionBrush}" -->
                        </StackPanel>
                        <!--<DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding HasSubFilters}" Value="False">
                                <Setter Property="IsEnabled" Value="False" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsLastInStack}" Value="True">
                                <Setter Property="IsEnabled" Value="False" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsFirstInStack}" Value="True">
                                <Setter TargetName="Divider" Property="Visibility" Value="Collapsed" />
                            </DataTrigger>
                        </DataTemplate.Triggers>-->
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <!--<ItemsControl.ItemContainerStyle>
                    <Style TargetType="ContentPresenter">
                        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                    </Style>
                </ItemsControl.ItemContainerStyle>-->
            </ItemsControl>

            <Grid x:Name="FiltersGrid" Grid.Row="1" Margin="30,15,0,30" Background="Lavender">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Grid.RenderTransform>
                    <ListBox x:Name="FiltersList" Background="DarkGray" ItemsSource="{Binding DisplayResults}" FontFamily="Cambria" FontSize="22"  >
                        <!--
                        SelectedItem="{Binding HighlightedBook, Mode=TwoWay}"
                        -->

                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="Margin" Value="0,0,30,0" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <ContentPresenter />
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                                <!--<Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Trigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <BooleanAnimationUsingKeyFrames BeginTime="00:00:00.1"  Storyboard.TargetProperty="(ListBoxItem.IsSelected)">
                                                        <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="True"/>
                                                    </BooleanAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.EnterActions>
                                        <Trigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <BooleanAnimationUsingKeyFrames BeginTime="00:00:00"  Storyboard.TargetProperty="(ListBoxItem.IsSelected)">
                                                        <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False"/>
                                                    </BooleanAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.ExitActions>
                                    </Trigger>
                                </Style.Triggers>-->
                            </Style>
                        </ListBox.ItemContainerStyle>
                        <ListBox.ItemTemplate>
                            <DataTemplate>

                                <!--<DataTemplate.Resources>
                                    <DataTemplate DataType="{x:Type d:BookFilter}" >
                                        <TextBlock Text="{Binding DisplayText}" Margin="0,6,0,3" TextWrapping="Wrap" />
                                    </DataTemplate>
                                    <DataTemplate DataType="{x:Type vm:BookViewModel}" >
                                        <StackPanel Margin="0,6,0,3">
                                            <TextBlock Text="{Binding Model.Title}" TextWrapping="Wrap" />
                                            <TextBlock Text="{Binding Model.Creator, StringFormat='by {0}'}" FontFamily="{StaticResource PrimaryFontFamily}" FontSize="12" FontWeight="Light" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </DataTemplate>
                                </DataTemplate.Resources>-->
                            <Button x:Name="FilterButton" Content="{Binding DisplayText}" 
                                    Command="{Binding Path=DataContext.ApplyFilterCommand, ElementName=layoutAwarePage}" 
                                    CommandParameter="{Binding}"
                                    />
                            <!-- Click="FilterButton_Click" -->
                                
                            <!--Style="{StaticResource UnderlineButton}"
                          -->
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
            </Grid>

            <SemanticZoom x:Name="semanticZoom" Visibility="Collapsed" Grid.Row="2" Margin="0,0,0,0" VerticalAlignment="Bottom" HorizontalAlignment="Stretch">
                <SemanticZoom.ZoomedOutView>
                    <GridView ItemsSource="{Binding Path=View.CollectionGroups, Source={StaticResource itemsViewSource}}"
                        Foreground="White" ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock
                                Text="{Binding Group.Key}"
                                FontFamily="Segoe UI Light"
                                FontSize="24"
                                Foreground="Black" />
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid ItemWidth="75" ItemHeight="75" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="Margin" Value="4" />
                                <Setter Property="Padding" Value="10" />
                                <Setter Property="BorderBrush" Value="Gray" />
                                <Setter Property="BorderThickness" Value="1" />
                                <Setter Property="HorizontalContentAlignment" Value="Center" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                            </Style>
                        </GridView.ItemContainerStyle>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
                <SemanticZoom.ZoomedInView>
                    <hdkui:VariableSizedGridView  x:Name="ItemGridView"
                    ItemsSource="{Binding Source={StaticResource itemsViewSource}}" 
                    ItemTemplate="{StaticResource HubItemTemplate}"
                    IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
                    ItemContainerStyle="{StaticResource LiveTileContainerStyle}" 

                    AutomationProperties.AutomationId="ItemGridView"
                    AutomationProperties.Name="Grouped Items"
                    SelectionMode="None"
                    IncrementalLoadingTrigger="Edge" IncrementalLoadingThreshold="1"
                    >
                        <hdkui:VariableSizedGridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="18" FontFamily="Segoe UI Light" />
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid ItemWidth="175" ItemHeight="175" Orientation="Vertical" Margin="0,0,20,0" MaximumRowsOrColumns="3"/>
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </hdkui:VariableSizedGridView.GroupStyle>
                        <hdkui:VariableSizedGridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </hdkui:VariableSizedGridView.ItemsPanel>
                        <Button Visibility="Collapsed"/>
                    </hdkui:VariableSizedGridView>
                </SemanticZoom.ZoomedInView>
            </SemanticZoom>

        </Grid>        
        <!--<Grid.RowDefinitions>
            <RowDefinition Height="0.4*" />
            <RowDefinition Height="0.2*" />
            <RowDefinition Height="0.4*" />
        </Grid.RowDefinitions>
        - Horizontal scrolling grid used in most view states -
        <SemanticZoom Grid.Row="0" x:Name="semanticZoom" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <SemanticZoom.ZoomedOutView>
                <GridView Foreground="White" ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock
                                Text="{Binding Group.Key}"
                                FontFamily="Segoe UI Light"
                                FontSize="24"
                                Foreground="Black" />
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid ItemWidth="75" ItemHeight="75" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.ItemContainerStyle>
                        <Style TargetType="GridViewItem">
                            <Setter Property="Margin" Value="4" />
                            <Setter Property="Padding" Value="10" />
                            <Setter Property="BorderBrush" Value="Gray" />
                            <Setter Property="BorderThickness" Value="1" />
                            <Setter Property="HorizontalContentAlignment" Value="Center" />
                            <Setter Property="VerticalContentAlignment" Value="Center" />
                        </Style>
                    </GridView.ItemContainerStyle>
                </GridView>
            </SemanticZoom.ZoomedOutView>
            <SemanticZoom.ZoomedInView>
                <hdkui:VariableSizedGridView  x:Name="ItemGridView"
                    ItemsSource="{Binding Source={StaticResource itemsViewSource}}" 
                    ItemTemplate="{StaticResource HubItemTemplate}"
                    IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
                    ItemContainerStyle="{StaticResource LiveTileContainerStyle}" 

                    AutomationProperties.AutomationId="ItemGridView"
                    AutomationProperties.Name="Grouped Items"
                    SelectionMode="None"
                                               IncrementalLoadingTrigger="Edge" IncrementalLoadingThreshold="1"
                    >
                    <hdkui:VariableSizedGridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="18" FontFamily="Segoe UI Light" />
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="175" ItemHeight="175" Orientation="Vertical" Margin="0,0,20,0" MaximumRowsOrColumns="3"/>                               
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </hdkui:VariableSizedGridView.GroupStyle>
                    <hdkui:VariableSizedGridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </hdkui:VariableSizedGridView.ItemsPanel>
                    <Button Visibility="Collapsed"/>
                </hdkui:VariableSizedGridView>
            </SemanticZoom.ZoomedInView>
        </SemanticZoom>
        
        <GridView ItemsSource="{Binding Source={StaticResource filtered}}" Grid.Row="2" />
        
        <Grid Grid.Row="1">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding Path=Filterer.DisplayText}" />
                <ListBox SelectedItem="{Binding Path=Filterer.SelectedSubFilter, Mode=TwoWay}"
                         ItemsSource="{Binding Path=Filterer.SubFilters}" >
                </ListBox>
                <Button Content="{Binding Path=Filterer.SelectedSubFilter.DisplayText}" Command="{Binding Path=Filterer.Apply}" />

            </StackPanel>
        </Grid>-->
        

        <!--<GridView x:Name="vgvHubMain"
                                HorizontalContentAlignment="Stretch"
                                VerticalContentAlignment="Stretch"
                                ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                                SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                                ItemTemplate="{StaticResource HubDataTemplate}"
                                ItemContainerStyle="{StaticResource LiveTileContainerStyle}">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" ItemWidth="400" ItemHeight="170" VerticalChildrenAlignment="Center" MaximumRowsOrColumns="3" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Key}" Foreground="Gold" />
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>-->
        
        <!--
                <hdkui:VariableSizedGridView x:Name="vgvHubMain"
                                HorizontalContentAlignment="Stretch"
                                VerticalContentAlignment="Stretch"
                                ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                                SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                                ItemTemplate="{StaticResource HubDataTemplate}"
                                ItemContainerStyle="{StaticResource LiveTileContainerStyle}">
            <hdkui:VariableSizedGridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid ItemWidth="90" ItemHeight="150" Orientation="Vertical" Margin="0" MaximumRowsOrColumns="3"  />
                </ItemsPanelTemplate>
            </hdkui:VariableSizedGridView.ItemsPanel>
        </hdkui:VariableSizedGridView>-->
        
        <!--ProgressRing Grid.Row="1" IsActive="{Binding InterestingPhotos.IsLoading}"/-->
    </Grid>
</hdkui:LayoutAwarePage>